<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="libs/jquery-3.6.0.min.js"></script>
    <script src="libs/bootstrap/4.6.1/bootstrap-4.6.1.min.js"></script>
    <script src="libs/echarts-5.1.1.min.js"></script>
    <script src="js/jfx-bridge.js"></script>

    <link href="libs/bootstrap/4.6.1/bootstrap-4.6.1.min.css" rel="stylesheet" />
    <link href="libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="css/app.css" rel="stylesheet"/>
</head>
<body>
<div class="content-root flexable">
    <div class="flexable tool-bar">
        <a class="tool-bar-item" title="新建项目..." id="btn-create-project" data-alt="createProject" data-type="project">
            <i class="fa fa-fw fa-file-powerpoint-o"></i>
        </a>
        <a class="tool-bar-item" title="新建模块..." id="btn-create-module" data-alt="createModule" data-type="module">
            <i class="fa fa-fw fa-file-o"></i>
        </a>
        <span class="tool-bar-div"></span>
        <a class="tool-bar-item" title="打开项目..." id="btn-open-project" data-alt="selectProject">
            <i class="fa fa-fw fa-folder-open-o"></i>
        </a>
        <a class="tool-bar-item" title="关闭项目" id="btn-close-project" data-alt="closeProject">
            <i class="fa fa-fw fa-times"></i>
        </a>
        <span class="tool-bar-div"></span>
        <a class="tool-bar-item" title="开始分析..." id="btn-analyze" data-alt="analyze">
            <i class="fa fa-fw fa-play"></i>
        </a>
    </div>
    <div class="flexable auto-grow">
        <div class="pretty-scrollable tree-area">
            <div class="list-header"></div>
            <ul class="module-name-list" id="nav-module-list"></ul>
        </div>
        <div class="pretty-scrollable main-area auto-grow">
            <div id="project-info" style="display: none">
                <div class="module-info flexable">
                    <h3 id="project-name">未命名的项目-1</h3>
                    <div id="project-path">D:\hothink\iot-cloud</div>
                </div>
                <div class="canvas" id="chart-project" style="display: none"></div>
            </div>
            <ul id="module-list" class="module-name-list" style="display: none">
<!--
                <li data-name="monitor-center">
                    <div class="module-info flexable">
                        <h4>monitor-center</h4>
                        <div>modules/monitor-center</div>
                    </div>
                    <div class="canvas"></div>
                </li>
-->
            </ul>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" id="choose-projects-dialog">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择项目</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="choose-projects-body"></div>
            <div class="modal-footer">
<!--
                <div class="auto-grow">
                    <button type="button" class="btn btn-sm btn-danger">删除</button>
                </div>
-->
                <button type="button" class="btn btn-sm btn-primary" id="btn-select-project">打开</button>
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" id="create-project-dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新建项目</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="form-list">
                    <li class="field-label">名称</li>
                    <li class="flexable field-row">
                        <input type="text" class="form-control form-control-sm" id="item-name"/>
                    </li>
                    <li class="field-label">路径</li>
                    <li class="flexable field-row">
                        <div class="input-group input-group-sm mb-3">
                            <input type="text" class="form-control" id="path">
                            <div class="input-group-append">
                                <span class="input-group-text" id="btn-browser">
                                    <i class="fa fa-fw fa-folder-open-o"></i>
                                </span>
                            </div>
                        </div>
                    </li>
                    <li class="flexable field-row field-label">
                        忽略的项目
<!--                        <label id="label-include"><input type="checkbox" id="include-project" checked/> 包含项目的忽略模式</label>-->
                    </li>
                    <li class="flexable field-row">
                        <input type="text" id="ignore-pattern" class="form-control form-control-sm" />
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <div class="auto-grow text-danger" id="editor-error-message" style="display: none"></div>
                <div class="auto-grow" id="editor-progress" style="display: none">
                    <i class="fa fa-spinner fa-pulse"></i> 正在保存，请稍候...
                </div>
                <button type="button" class="btn btn-sm btn-primary" id="btn-save-edit">确定</button>
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<script src="js/index.js"></script>
</body>
</html>